<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
  <!--css-->
  <link rel="stylesheet" href="../static/css/bootstrap.4.3.1.min.js.css" th:href="@{/css/bootstrap.4.3.1.min.js.css}"/>
  <!--js-->
  <script th:src="@{/js/jquery-3.4.1.js}"></script>
  <style>
    .box{
      height: 300px;
      width: 400px;
      position: absolute;
      top:-38%;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      background-color: #2B8FB5;
      /*background-image: url("/img/001.jpg");*/
      /*border: 2px solid #2B8FB5;*/
    }

    body{
      background-image: linear-gradient(to right top, #65dfc9, #6cdbeb);
      align-items: center;
      justify-content: center;
      display: flex;
    }
    .main{
      background-color: rgba(255, 255, 255, 0.4);
      position: relative;
      width: 60%;
      height: 600px;
      box-shadow: 0 5px 15px rgba(20, 20, 20, 0.8);
      display: block;
      border-radius: 50px;
      align-items: center;
      top: 100px;
      backdrop-filter: blur(50px);
    }

      .container {
        max-width: 400px;
      }

      .yyy1{
        margin-top: 10%;
        margin-bottom: 10%;
      }

      .yyy2{
        border-radius: 10px;
        border: 1px solid white;
      }
  </style>
</head>
<body style="background-image: url('/img/001.jpg');background-size: 2000px 1000px">
<div class="main">
  <div class="container">
    <h3 style="margin-top: 30%;text-align: center;">用户登陆</h3>
    <div class="yyy1"><input class="yyy2" type="text" name="username" style="width: 100%;height:40px;" placeholder="请输入账户" value=""></div>
    <div class="yyy1"><input class="yyy2" type="pwd" name="pwd" style="width: 100%;height: 40px;" placeholder="请输入密码" value=""></div>
    <input style="width: 370px;" type="button" class="btn btn-success" onclick="get1()"  value="登陆">
    <footer class=" p-4 text-light text-center">
      <div class=" copyright" style="color: #e6e6e6;height: 40px;padding: 10px 0px 10px 0px">
        <span>Copyright © 2023 公寓水电管理系统</span>
      </div>
    </footer>
  </div>

</div>
<script>
    //ajax前后端交互实现登录跳转
    function get1(){
      var username=$("input[name='username']").val();
      var pwd=$("input[name='pwd']").val();
      if(username==""&&pwd==""){//前端判断用户名、密码是否为空
        alert("用户名、密码为空！请重新输入！")
      }else if(username==""){
        alert("用户名为空，请重新输入！！！")
      }else if(pwd==""){
        alert("密码为空，请重新输入！！！")
      }
      else{
        $.ajax({
          url: '/logon1',//后台接口地址
          type:'get',//请求方式，一般为get、post
          dataType:'text',//表示返回的数据必s须为' '中填写的类型，否则：会走下面error对应的方法。 ajax返回：json、xml、html、text、script、jsonp这几种类型
          data:{
            username:username,
            pwd:pwd
          },
          success:function (data) {
            // alert(data+"yxy")
              if(data=="0"){
                alert("用户名不存在！")
              }else if(data=="2"){
                alert("密码错误！")
              }else if(data=="3"){//超级管理员
                alert("欢迎用户"+username+"登录！超级管理员！！！")
                window.open("/root/index?username="+username,"_parent");
              }else if(data=="1"){
                alert("欢迎用户"+username+"登录！住户！！！")
                window.open("/main123?username="+username,"_parent");
              }
          },
          error:function () {
            alert("请求失败")
          }
        })
      }
    }
    //
    // //跳转至注册页面
    // function get2(){
    //   window.open("/logon/register","_parent");
    // }

</script>
</body>
</html>